<template>
  <div class="select-wrapper">
    <el-select v-model="currentValue" placeholder="请选择" @change="handleChange">
      <el-option
          v-for="option in options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getSelectlist } from "@/api/ty/tyShop";
const emit = defineEmits();
const options = ref([]);
const props = defineProps({
  modelValue: {
    type: Number,
    default: null, // 设置默认值为 null，如果没有传入默认值，则默认选中第一个选项
  },
});

const currentValue = ref(props.modelValue); // 初始化为 props.modelValue 或者 null

function handleChange(value) {
  currentValue.value = value; // 更新当前选中的值
  emit('update:modelValue', value);
}

onMounted(() => {
  getList();
});

function getList() {
  getSelectlist().then(response => {
    options.value = response.data.map(item => ({
      value: item.value,
      label: item.label,
    }));
  });
}
</script>

<style scoped>
.select-wrapper {
  width: 300px;
}
</style>
